<template>
	<view class="bg">
		<z-nav-bar backState="1000" type="transparent" bgColor="#F0F4F9" title=" " fontColor="#000"></z-nav-bar>
		
		<view class="u-p-t-80 u-p-l-80 u-p-r-80">
			<view class="">
				<text class="u-font-45 text-bold">手机号登录</text>
			</view>
		</view>
		
		<view class="u-m-t-120 u-p-l-80 u-p-r-80">
			<view >
				<u-form labelPosition="left" :model="requestParams" :rules="rules" ref="uForm">
					<u-form-item label="+86" prop="mobile" borderBottom>
						<u-input v-model="requestParams.mobile" border="none" clearable></u-input>
					</u-form-item>
				</u-form>
			</view>
			<view class="u-m-t-30 ">
				<text>未注册的手机号将自动创建账号</text>
			</view>
		</view>
		
		<view class="u-p-80 ">
			<view>
				<u-button shape="circle" text="获取验证码" size="medium" @click="handleLogin" :customStyle="{'color':'#FFFFFF', 'backgroundColor':'#FFB143'}"></u-button>
			</view>
			<view class="text-center">
				<view class="agreement">
					<u-checkbox-group  >
						<u-checkbox :checked="check" @change="handleAgreeChange"></u-checkbox>
					</u-checkbox-group>
					<view class="agreement-text">
						<text>我已阅读并同意</text> 
						<text class="protocol" @click="handleUser">《用户协议》</text>
						<text>和</text>
						<text class="protocol" @click="handlePrivacy">《隐私协议》</text>
					</view>
				</view>
			</view>
		</view>
		
		<Verify
			@success='success'
			:mode="'pop'"
			:captchaType="'blockPuzzle'"
			ref="verify"
			:imgSize="{width:'310px',height:'155px'}"
		></Verify>
	
			
	</view>
</template>

<script>
	import Verify from "@/pages_one/components/verify/verify.vue"
	// import {register} from '@/api/login/login.api.js'
	import { mapGetters } from 'vuex'
	import {jumpTypeEnum} from '@/common/const.js'
	
	export default {
		data(){
			return{
				// 跳转类型
				jumpTypeEnum,
				requestParams:{
					//mobile:'13294100031'
					mobile:''
				},
				rules:{},
				check:false,
				value:'',
				targetUrl:''
			}
		},
		components:{
			Verify
		},
		computed:{
			...mapGetters(['platform','openId'])
		},
		onLoad(e) {
			this.targetUrl = e.targetUrl
		},
		methods:{
			
			checkboxChange(e){
				
			},
			
			/**
			 * 用户协议
			 */
			handleUser(){
				this.jumpUtil.jumpTo(jumpTypeEnum.navigate, '/pages/agreement/user', false)
			},
			
			/**
			 * 用户隐私协议
			 */
			handlePrivacy(){
				this.jumpUtil.jumpTo(jumpTypeEnum.navigate, '/pages/agreement/privacy', false)
			},
			
			/**
			 * 登录
			 */
			handleLogin(){
				//this.$store.dispatch("changeLoginState")
				
				let that = this
				if(this.requestParams.mobile == ''){
					this.$u.toast('请输入手机号')
					return
				}
				
				if(!this.$u.test.mobile(this.requestParams.mobile)){
					this.$u.toast('请输入正确的手机号')
					return
				}
				
				if(!this.check){
					uni.showModal({
						title: '温馨提示',
						content: '为了更好的保障您的合法权益，请您阅读并同意以下协议:《用户协议》、《隐私政策》点击同意即可表示你已经阅读并同意全部条款。',
						success: function (res) {
								if (res.confirm) {
									that.check = true
									that.$refs.verify.show();
								} else if (res.cancel) {
								}
						}
					});
				} else {
					this.$refs.verify.show();
				}
			},
						
			/**
			 * 密码登录
			 */
			handlePasswordLogin(){
				this.jumpUtil.jumpTo(jumpTypeEnum.navigate, '/pages_one/login/password/index', false)
			},
			
			handleAgreeChange(e){
				this.check = e
			},
			
			/**
			 * 滑块成功回调
			 */
			success(){
				// 关闭滑块界面
				this.$refs.verify.close();
				// 注册
				this.jumpUtil.jumpTo(jumpTypeEnum.navigate, `/pages_one/login/sms/send?mobile=${this.requestParams.mobile}&targetUrl=${this.targetUrl}`, false)
			},
		}
	}
</script>

<style>
	page{
		background-color: #FFFFFF;
	}
</style>

<style lang="scss" scoped>		
	.bg{
		// background: url(../../../static/images/login/login_bg.png);
		background-size: 100% 100%;
		height: 300rpx;
		// opacity: 0.5;
		padding-top: 150rpx;
	}
	
	.agreement {
		display: flex;
		align-items: center;
		margin: 0rpx 0rpx;
		margin-top: 50rpx;
		
		.agreement-text {
			font-size: 26rpx;
			padding-left: 0rpx;
			color: $u-tips-color;
			
			.protocol{
				color: #006EFF;
			}
		}
	}
	
	.yzm-size{
		width: 100%;
		height: 200rpx;
	}
	
	.password-login{
		position: absolute; 
		bottom: 100px; 
		left: 35%;
		display: flex;
		opacity: 0.5;
		line-height: 16px;
	}
</style>